<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row style="height: 100%" type="flex">
			<cl-biz-toolbar v-model="currBiz.biz_id" @change="bizChange" />
			<cl-flex1 class="h-100" style="overflow: hidden">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<div class="title">{{ currBiz.biz_name }}</div>
							<cl-flex1 />
							<div>
								<cl-filter-group v-model="search" class="pr-1">
									<cl-filter label="关键字">
										<el-input
											v-model="search.keyword"
											placeholder="输入广告账户账号"
											clearable
											style="width: 170px"
											@change="refresh()"
										/>
									</cl-filter>
									<cl-filter label="品牌">
										<cl-select
											v-model="search.bra_id"
											@change="refresh()"
											placeholder="全部"
											clearable
											multiple
											collapse-tags
											filterable
										>
											<el-option
												v-for="item in bizRefData.brand"
												:key="item.bra_id"
												:label="item.bra_name"
												:value="item.bra_id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="推广人">
										<cl-select
											v-model="search.user_id"
											@change="refresh()"
											clearable
											filterable
										>
											<el-option label="全部" value="" />
											<el-option
												v-for="item in userList"
												:key="item.user_id"
												:label="item.user_name"
												:value="item.user_id"
											/>
										</cl-select>
									</cl-filter>
									<!-- <cl-flex1 /> -->
								</cl-filter-group>
							</div>
							<div>
								<el-button
									icon="el-icon-plus"
									type="primary"
									@click="addDis({}, 'add')"
									size="small"
								>
									添加广告账户
								</el-button>
							</div>
						</el-row>
					</template>
					<div style="height: 100%">
						<cl-table v-bind="table">
							<cl-empty slot="empty" />
							<template #column-opt="{ scope: { row } }">
								<div class="flex flex-align-start">
									<el-button type="warning" @click="addDis(row, 'edit')">
										编辑
									</el-button>
									<el-button type="danger" @click="remove(row, 'copy')">
										删除
									</el-button>
								</div>
							</template>
						</cl-table>
					</div>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
		<!-- 操作 -->
		<add-distrib ref="Adddistrib" @refresh="refresh" />
	</cl-crud>
</template>

<script>
import { mapGetters } from "vuex";
import AddDistrib from "./components/add-distrib";

export default {
	name: "SetPromotionDistributor",
	components: {
		AddDistrib
	},
	data() {
		return {
			search: {
				bra_id: [],
				keyword: "",
				user_id: "",
				showpage: 1
			},
			currBiz: {
				biz_id: ""
			},
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						label: "#",
						type: "index",
						width: 50,
						fixed: true,
						disable: true
					},
					{
						label: "品牌",
						prop: "bra_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "广告账户账号",
						prop: "supplie_id",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},

					{ label: "类型", prop: "type_dec", width: 100 },
					{
						label: "推广渠道",
						prop: "source_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "推广人",
						prop: "promoter_name",
						minWidth: 180,
						align: "left",
						showOverflowTooltip: true
					},

					{ label: "操作", prop: "opt", width: 180, fixed: "right", disable: true }
				],
				props: {
					maxHeight: 500
				}
			},
			userList: [],
			load: false,
			moreOptList: [
				{ label: "日志", command: "log" },
				{ label: "复制", command: "copy" },

				{ label: "修改", command: "edit" },
				{ label: "删除", command: "remove" }
			]
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.currBiz;
			return this.getBizRefData(biz_id);
		},
		...mapGetters(["browser"])
	},
	methods: {
		async init() {
			if (this.browser.isMobile) return false;
			// 如果是手机端不进行下一步

			const { biz_id } = this.currBiz;
			this.getBizRefBrand(biz_id);
			this.initData();
		},
		async initData() {
			if (this.browser.isMobile) return false;
			// 如果是手机端不进行下一步

			const { biz_id } = this.currBiz;
			this.userList = (await this.$service.user.deptuserlists({ biz_id, post: 4 })) || [];
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.config)
				.set("dict", {
					api: {
						page: "distributorLists"
					}
				})
				.done();
			if (!this.load) return;
			app.refresh(this.search);
		},
		async onRefresh(params, { next, done, render }) {
			if (this.browser.isMobile) return false;
			// 如果是手机端不进行下一步

			const { biz_id } = this.currBiz;
			let { list } = await next({
				...params,
				biz_id
			});
			render(list);
		},
		//切换左侧事业部
		bizChange(v) {
			this.currBiz = v;
			this.search.bra_id = [];
			this.search.user_id = "";
			this.init();
			this.$nextTick(() => {
				this.refresh();
			});
		},
		//添加
		addDis(row, type) {
			this.$refs.Adddistrib.open(row, type);
		},
		//复制
		copy(row, type) {
			this.$refs.Adddistrib.open(row, type);
		},
		//日志
		openLog(row) {
			this.$refs.distribLog.open(row);
		},

		remove(row) {
			this.confirm("此操作将删除该账号, 是否继续?").then(async () => {
				await this.$service.config.distributorDel({ id: row.id });
				this.refresh();
				this.$message.success("删除成功!");
			});
		},
		
		// crud刷新
		refresh(biz_id, reset = true) {
			biz_id && (this.currBiz.biz_id = biz_id);
			console.log("biz_id", biz_id);
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.load = true;
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	font-size: 18px;
}
</style>
